<script setup>
import { computed } from 'vue'
import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/24/outline'

const props = defineProps({
    title: {
        type: String,
        required: true
    },
    value: {
        type: [String, Number],
        required: true
    },
    icon: {
        type: Object,
        required: true
    },
    iconColor: {
        type: String,
        default: 'text-orange-600'
    },
    iconBgColor: {
        type: String,
        default: 'bg-orange-50'
    },
    trend: {
        type: Object,
        default: null
    }
})

const formattedValue = computed(() => {
    if (typeof props.value === 'number') {
        return props.value.toLocaleString('zh-CN')
    }
    return props.value
})
</script>

<template>
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
        <div class="p-6">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-600 mb-1">
                        {{ title }}
                    </p>
                    <p class="text-2xl font-semibold text-gray-900">
                        {{ formattedValue }}
                    </p>
                    <div v-if="trend" class="mt-2 flex items-center text-xs">
                        <component
                            :is="trend.isUp ? ArrowTrendingUpIcon : ArrowTrendingDownIcon"
                            class="h-4 w-4 mr-1"
                            :class="trend.isUp ? 'text-green-500' : 'text-red-500'"
                        />
                        <span :class="trend.isUp ? 'text-green-600' : 'text-red-600'">
                            {{ trend.value }}%
                        </span>
                        <span class="ml-1 text-gray-500">较上期</span>
                    </div>
                </div>
                <div :class="[
                    'flex-shrink-0 p-3 rounded-lg',
                    iconBgColor
                ]">
                    <component
                        :is="icon"
                        class="h-6 w-6"
                        :class="iconColor"
                        aria-hidden="true"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
